<template>
  <div class="add">
    <Zc></Zc>
  <div id="app">
    <div class="tou">
        <h1>欢迎注册账号</h1>
        <h5>每一天，乐在沟通。</h5>
        <iframe style="display: none;" frameborder="0" name="myiframe"></iframe>
        <form action="http://127.0.0.1:1234/U/n" target="myiframe">
          <input
          type="text"
          class="form-control"
          v-model="useradd.user"
          name="user"
          placeholder="昵称"
        />
          <p>
            <input
              type="text"
              class="form-control"
              v-model="useradd.qq"
              name="qq"
              placeholder="请输入QQ / QQ邮箱"
              required
            />
          </p>
          <p>
              <div class="input-group-append">
            <input
              type="text"
              class="form-control"
              style="width: 226px;"
              placeholder="QQ邮箱验证码"
              aria-label="Recipient's username"
              aria-describedby="button-addon2"
              v-model="fa"
            />
            <button
              type="submit"
              style="opacity: 0.5;"
              class="btn btn-light"
              @click="code(fs)"
              name="emi"
            >
              发送
            </button>
          </div>
            <input type="hidden"  v-model="fs" name="fs" />
          </p>
          <p>
            <input
              type="password"
              class="form-control"
              v-model="useradd.pass"
              name="pass"
              placeholder="密码"
            />
          </p>
        </form>
        <input type="checkbox"/><span style="font-size: 13px;">已阅读并同意QQ邮箱 <span style="color: rgb(102, 187, 239)">用户协议</span> 和
          <span style="color: rgb(96, 194, 255)">隐私政策</span></span
        >
        <p>
          <button style="width: 266px;" type="button" class="btn btn-primary" @click="add(useradd)">立即注册</button>
        </p>
        <span style="font-size: 10px;color: gray;">Copyright ©2023-2023Tencent All Rights Reserved.</span>
      </div>
  </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";
import Zc from "../views/zc_tou.vue";

    const router = useRouter();
    const useradd = ref({});
    const user = ref("");
    const fs = ref("");
    const fa = ref("");

 // 注册
 const add = (useradd) => {
      if (fs.value === fa.value) {
        axios.post(`http://127.0.0.1:1234/U`, useradd.value).then((response) => {
          if (response.data === 1) {
            ElMessage({
        message: "注册成功",
        type: "success",
        center: true,
      });
            setTimeout(() => {
              location.href = "/dl";
            }, 1000);
          }
        });
      } else {
        ElMessage({
        showClose: true,
        message: "验证码错误！",
        type: "error",
      });
      }
};
     // 随机验证码
const code = () => {
  let randomCode = '';
      for (let i = 0; i < 6; i++) {
        randomCode += Math.floor(Math.random() * 10).toString();
        fs.value = randomCode;
      }
        ElMessage({
        message: "验证码已发送",
        type: "success",
        center: true,
      });
      console.log(fs.value);

      // var btn = document.getElementsByName("emi")[0];
      // btn.disabled = true;
      // var time = 10; // 定义剩下的秒数
      // var timer = setInterval(function () {
      //   if (time == 0) {
      //     // 清除定时器和复原按钮
      //     clearInterval(timer);
      //     btn.disabled = false;
      //     btn.innerHTML = "发送";
      //   } else {
      //     btn.innerHTML = time + "秒";
      //     time--;
      //   }
      // }, 1000);
    };
</script>
<style scoped>
.add {
  background-image: url("../assets/image/qq.png");
  background-size: cover;
  height: 100vh;
}
* {
  margin: 0 auto;
}
ol,
li,
ul {
  list-style: none;
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.tou {
  text-align: center;
  width: 286px;
}
.tou h1 {
  color: lightseagreen;
  text-shadow: 1px 0 #666, 0 1px #ccc, -1px 0 #ccc, 0 -1px #ccc;
  margin-bottom: 15px;
}
.tou input {
  margin-bottom: 26px;
  opacity: 0.5;
}
.tou button {
  height: 37px;
}
form {
  margin-top: 26px;
}
</style>
